<!-- stories/templates/stories/profile.html -->
{% extends 'stories/base.html' %}
{% load static %}

{% block title %}个人资料 - AI故事生成网站{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1> 个人资料</h1>
        <p>管理您的账户信息与创作数据</p>
    </div>

    <div class="profile-container">
        <!-- 左侧栏：头像 + 基本信息 + 统计数据 -->
        <div class="profile-sidebar">
            <!-- 头像区域 -->
            <div class="profile-avatar">
                <!-- 如果用户设置了头像，显示图片 -->
                {% if user.avatar %}
                    <img src="{{ user.avatar.url }}" alt="{{ user.username }} 的头像" class="avatar-img">
                {% else %}
                    <!-- 否则显示默认头像（首字母） -->
                    <div class="default-avatar">
                        {{ user.username|slice:":1"|upper }}
                    </div>
                {% endif %}

                <!-- 头像上传表单（自动提交） -->
                <div class="avatar-upload">
                    <form method="post" enctype="multipart/form-data" action="{% url 'stories:profile' %}">
                        {% csrf_token %}
                        <!-- 隐藏文件输入框 -->
                        <input type="file" name="avatar" id="avatarUpload" accept="image/*" onchange="this.form.submit()" style="display: none;">
                        <!-- 点击标签触发文件选择 -->
                        <label for="avatarUpload" class="btn btn-sm btn-outline"> 更换头像</label>
                    </form>
                </div>
            </div>

            <!-- 用户基本信息 -->
            <div class="profile-info">
                <h3> {{ user.username }}{% if user.is_admin %} (管理员){% endif %}</h3>
                <p> {{ user.email|default:"未设置邮箱" }}</p>
                <p> {{ user.phone|default:"未设置手机号" }}</p>
            </div>

            <!-- 用户数据统计 -->
            <div class="profile-stats">
                {% if user.is_admin %}
                    <!-- 管理员显示审核相关的统计数据 -->
                    <div class="stat-item">
                        <span class="stat-number">{{ review_stats.total_pending }}</span>
                        <span class="stat-label">待审核故事</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ review_stats.total_reviewed }}</span>
                        <span class="stat-label">已审核故事</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ review_stats.total_published }}</span>
                        <span class="stat-label">已发布故事</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ review_stats.total_rejected }}</span>
                        <span class="stat-label">已驳回故事</span>
                    </div>
                {% else %}
                    <!-- 普通用户显示创作相关的统计数据 -->
                    <div class="stat-item">
                        <span class="stat-number">{{ published_story_count }}</span>
                        <span class="stat-label">已发布故事</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ draft_story_count }}</span>
                        <span class="stat-label">草稿故事</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ pending_story_count }}</span>
                        <span class="stat-label">待审核故事</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ rejected_story_count }}</span>
                        <span class="stat-label">已驳回故事</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ comment_count }}</span>
                        <span class="stat-label">我的评论</span>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- 右侧主区域：编辑表单 -->
        <div class="profile-main">
            <form method="post" enctype="multipart/form-data" class="profile-form">
                {% csrf_token %}

                <!-- 基本信息区块 -->
                <div class="form-section">
                    <h3> 基本信息</h3>

                    <!-- 用户名 -->
                    <div class="form-group">
                        <label for="id_username">用户名</label>
                        {{ form.username }}
                        {% if form.username.errors %}
                            <div class="error-message">{{ form.username.errors }}</div>
                        {% endif %}
                    </div>

                    <!-- 邮箱 -->
                    <div class="form-group">
                        <label for="id_email">邮箱</label>
                        {{ form.email }}
                        {% if form.email.errors %}
                            <div class="error-message">{{ form.email.errors }}</div>
                        {% endif %}
                    </div>

                    <!-- 手机号 -->
                    <div class="form-group">
                        <label for="id_phone">手机号</label>
                        {{ form.phone }}
                        {% if form.phone.errors %}
                            <div class="error-message">{{ form.phone.errors }}</div>
                        {% endif %}
                    </div>

                    <!-- 个人简介 -->
                    <div class="form-group">
                        <label for="id_bio">个人简介</label>
                        {{ form.bio }}
                        {% if form.bio.errors %}
                            <div class="error-message">{{ form.bio.errors }}</div>
                        {% endif %}
                        <p class="help-text">介绍一下自己吧（最多500字）</p>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary"> 保存更改</button>
                    <a href="{% url 'stories:change_password' %}" class="btn btn-secondary">修改密码</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}